<template>

	<div class="container">
		<div v-if='vdata.isLogin&&oldClient'>
			<image class="content-main"
				src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ff4f3156-67e9-4988-af56-8fd609df24ff.png"
				mode="">
				<image @click="goff" class="btn-main" 
					src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/5351f4e4-4caa-4910-977f-61104e5c01ce.png"
					mode=""></image>
				</image>
		</div>
			<!-- 授权登录弹窗 -->
			<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin" @isLoginCallback="isLoginCallback"></gzLoginPopup>
			
			<!-- 老客唤醒提示 -->
					<uni-popup ref="oldDialog" type="dialog" :animation="false" :mask-click="false">
							<view style="width: 666rpx;height: 477rpx;background: #FFFFFF;border-radius: 26rpx 26rpx 26rpx 26rpx;">
								<view style="font-weight: bold;font-size: 34rpx;color: #0000000;text-align: center;padding-top: 64rpx;">
									短信验证
								</view>
								<image @click="crossBtn" class="cross" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fda3f688-6fc2-4e88-ba06-f094902be806.png" mode=""></image>
								<div  class="old_box" style="padding: 64rpx 42rpx">
									<view style="display: flex; align-items: center;">
										<text style="margin-right: 30rpx;">手机号</text>
										<input v-model="oldData.oldNumber" style="width: 440rpx;height: 69rpx;border-radius: 9rpx 9rpx 9rpx 9rpx;border: 2rpx solid #DDDDDD;font-size: 28rpx;" placeholder-style="color:#BBBBBB"  placeholder="请输入手机号" type="number" />
									</view>
									<view style="display: flex; align-items: center;margin-top: 30rpx;">
										<text style="margin-right: 30rpx;">验证码</text>
										<input v-model="oldData.verificationCode" style="width: 200rpx;height: 69rpx;border-radius: 9rpx 9rpx 9rpx 9rpx;border: 2rpx solid #DDDDDD;margin-right: 30rpx;font-size: 28rpx;" placeholder-style="color:#BBBBBB"  placeholder="请输入验证码"  />
										<button style="width: 200rpx;height: 69rpx;border-radius: 9rpx 9rpx 9rpx 9rpx;text-align: center;line-height: 69rpx;font-size: 24rpx;" @click="getMchSmsCode"  plain :disabled="vcConfig.disabled" :style="{ color: vcConfig.color, border: `2rpx solid ${vcConfig.color}` }">{{ vcConfig.text }}</button>
									</view>
									<view style="display: flex; margin-top: 30rpx;padding: 0 128rpx;">
										<!-- <view style="box-sizing: border-box;width: 155rpx;height: 69rpx;border-radius: 13rpx 13rpx 13rpx 13rpx;border: 2rpx solid #24C789;text-align: center;line-height: 69rpx;margin-right:30rpx;color: #24C789;" @click="oldCancel">取消</view> -->
										<view style="box-sizing: border-box;width :400rpx;height: 69rpx;background: #24C789;border-radius: 13rpx 13rpx 13rpx 13rpx;text-align: center;line-height: 69rpx;color: white;" @click="submitOldPhone">确定</view>
									</view>
								</div>	
							</view>		
						</uni-popup>
	</div>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue"
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import {$activityTakePartIn,$sendSmsCode,$awakeActivityByPhone} from '@/http/apiManager.js'
	import storageManage from '@/util/storageManage.js'
	const oldClient = ref(null)
	const oldDialog = ref()
	const isAuth = ref()
	const gzLoginPopupRef = ref()
	const rspTitle = ref()
	const vdata = reactive({
		isLogin: false, // 用户是否登录
		fansInfo: {}, // 用户详情
		activityId: '', // 活动id
		activityDetail: {}, // 活动详情
		activityChannelId:''  //渠道码id
	})
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	onLoad(async ({activityId,activityDetail,date,periodType,activityChannelId}) => {
		vdata.isLogin = storageManage.isLogin()
		vdata.activityId = activityId
		vdata.activityChannelId = activityChannelId
		vdata.activityDetail = JSON.parse(decodeURIComponent(activityDetail))
		// 判断活动是否过期
		if (vdata.activityDetail.state !== 4) {
			$infoBox.toast('当前活动已下线，正在返回首页！', {
				duration: 2000,
				mask: true
			})
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}, 2000)
			return
		}
		// 判断用户是否登录过
		if (!vdata.isLogin) {
			// await getActivityAwards(false) // 获取奖品列表
			uni.showModal({
				title: '提示',
				content: '请先进行登录注册，再进行参与！',
				success({
					cancel
				}) {
					if (cancel) {
						$infoBox.toast('登录失败，无法正常参与活动！')
						// vdata.errorReason = '1、登录失败，无法正常参与活动！'
					} else {
						gzLoginPopupRef.value.open() // 打开授权弹框
					}
				}
				
			})
			return
		}
		// 如果用户登陆过
		historyMsgHandle(vdata.activityId, vdata.activityDetail.activityTemplateNo,vdata.activityChannelId)
	})
	
	/**
	 * 登录回调
	 */
	function isLoginCallback(){
		if(!vdata.isLogin){
			$infoBox.toast('登录失败，无法正常参与活动！')
			// vdata.errorReason = '1、登录失败，无法正常参与活动！'
		}else{
			// 登陆成功后去处理历史消息
			historyMsgHandle(vdata.activityId, vdata.activityDetail.activityTemplateNo,vdata.activityChannelId)
		}
	}
	
	const historyMsgHandle = async (activityId, activityTemplateNo,activityChannelId) => {
		uni.showLoading({
			title: '加载中'
		});
		const res = await $activityTakePartIn({
			activityId,
			activityTemplateNo,
			activityChannelId
		})
		uni.hideLoading();
		oldClient.value = res.bizData.oldClient
		rspTitle.value = res.bizData.rspTitle
		isAuth.value = res.bizData.isAuth
		let isCancle = isAuth.value==1?true:false
		let text = null
		if(isCancle){
			text = '当前手机号暂无历史福分可迁移。选择“是”可尝试用其他手机号登录，选择“否”可继续进行实名认证'
		}else{
			text = '当前手机号无历史福分可迁移。选择“是”可使用您名下其他手机号尝试！'
		}
		if (!oldClient.value&&res.bizData.isMove==0) {	
			uni.showModal({
			title: '提示',
			cancelText:'否',
			confirmText:'是',
			showCancel:isCancle,
			content:text,
			success: function (res) {
				if (res.confirm) {
					oldDialog.value.open() 
				} else if (res.cancel) {
					if(isAuth.value==1){
					getApp().globalData.msg = '完成实名认证，可获得50福分！'	
					}
					uni.switchTab({
						url: '/pages/pageBlessingPoints/pageBlessingPoints',
					});
				}
			}
		});			
		}else if (oldClient.value){		
			console.log('参与成功');
		}else{
			uni.showModal({
				title: '提示',
				showCancel:false,
				content: `${rspTitle.value}`,
				success: function (res) {
					uni.switchTab({
						url: '/pages/pageBlessingPoints/pageBlessingPoints',
					});
				}
			});
		}
	}

	const goff = () => {
		uni.switchTab({
			url: '/pages/pageBlessingPoints/pageBlessingPoints',
		});
	}
	const crossBtn = ()=>{
		oldDialog.value.close()
		oldData.oldNumber = ''
		oldData.verificationCode = ''
		uni.switchTab({
			url: '/pages/pageBlessingPoints/pageBlessingPoints',
		});
		
	}
	
	
	// 老客唤醒手机号验证
	const oldData = reactive( 
	{
		oldNumber:"",
		verificationCode:""
	}
	)
	// 验证码相关配置
		const vcConfig = reactive({
			timer: null,	// 定时器
			text: '获取验证码',
			color: '#24c789',
			disabled: false,
		})
	
	
		/**
		 * 获取验证码 重置
		 */
		function originCode(){
			if(vcConfig.timer){
				clearInterval(vcConfig.timer)
			}
			vcConfig.text = '获取验证码'
			vcConfig.color = '#24c789'
			vcConfig.disabled = false
		}
		/**
		 * 获取验证码
		 */
		function getMchSmsCode(){
			 const regex = /^1[3-9]\d{9}$/;
			 if(!regex.test(oldData.oldNumber)){
				   $infoBox.toast(`请输入正确的手机号`)
				   return false
			 }
			// 发送验证码
			vcConfig.disabled = true
			vcConfig.text = '发送中...'
			vcConfig.color = '#999'
			$sendSmsCode({ phone: oldData.oldNumber,flag:4 }).then(res => {
				vcConfig.text = "重新获取(60)"
				let holdTime = 59; //定义变量并赋值
				vcConfig.timer = setInterval(() => {
					if (holdTime <= 0) {
						originCode()
						return; //返回前面
					}
					vcConfig.text = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			}).catch(()=>{
				originCode()
			})
		}
			
		const submitOldPhone = async()=>{
			const regex = /^1[3-9]\d{9}$/;
			if(!regex.test(oldData.oldNumber)){
				$infoBox.toast(`请输入正确的手机号`)
				 return false
			}
			if(oldData.verificationCode==''){
				$infoBox.toast(`请输入验证码`)
				 return false
			}
		await $awakeActivityByPhone({phone:oldData.oldNumber,code:oldData.verificationCode,activityId:vdata.activityId,activityChannelId:vdata.activityChannelId,flag:4}).then((res)=>{	 
		   if(res.bizData.oldClient){
			    uni.showModal({
			    	title: '提示',
			    	showCancel:false,
			    	content: `${res.bizData.rspTitle}`,
			    	success: function (result) {
			    	oldDialog.value.close()
			    	oldData.oldNumber = ''	   
			    	oldData.verificationCode = ''	
			    		 uni.switchTab({
			    		 	url: '/pages/pageBlessingPoints/pageBlessingPoints',
			    		 });	
						}
			    });
					
					
		   }else{
			   uni.showModal({
			   	title: '提示',
			   	showCancel:false,
			   	content: `${res.bizData.rspTitle}`,
			   	success: function (res) {
					oldData.oldNumber = ''
					oldData.verificationCode = ''
				}
			   });
				 
				
		   }
		   
	   }).catch((error)=>{
		// oldDialog.value.close() 
	   })
		
		}
	
	
	
	const oldCancel = ()=>{
		 oldDialog.value.close() 
		 oldData.oldNumber = ''
		 oldData.verificationCode = ''
	}
	
</script>
<style lang="less" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background-image: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/4cf3c1db-fdcb-4931-9aa3-9162ab3275cc.png');
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;

		.content-main {
			height: 600rpx;
			width: 600rpx;
			position: relative;
			margin: 200rpx 80rpx;

		}

		.btn-main {
			width: 320rpx;
			height: 120rpx;
			position: absolute;
			top: 450rpx;
			left: 140rpx;
		}
		.old_box{
			input{
				 padding-left: 12rpx;
			}
		}
		.cross{
				width: 40rpx;
			    height: 40rpx;
			    position: absolute;
			    top: 30rpx;
			    right: 30rpx;
		}
	}
</style>